import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Bars } from '@/components/charts/bars';
import { LineChart } from '@/components/charts/line-chart';
import { WorldMap } from '@/components/charts/world-map';
import { CompanyMiniList, CompanyTable } from '@/components/company/company-table';
import { EventList } from '@/components/events/event-row';
import { CountryChip } from '@/components/ui/badges';
import { Container, Empty, Note, PageHeader, Section, Stat, StatGrid } from '@/components/ui/section';
import { api, ApiError, safe } from '@/lib/api';
import { fmtInt, fmtPctSigned, fmtScore } from '@/lib/format';
import { routes } from '@/lib/site';
import type { CompanyCard, CountryDetailRaw } from '@/lib/types';

export const revalidate = 300;

async function load(code: string): Promise<CountryDetailRaw> {
  try {
    return await api.country(code.toUpperCase());
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
}
export async function generateMetadata({ params }: { params: Promise<{ code: string }> }): Promise<Metadata> {
  const { code } = await params;
  const d = await safe(api.country(code.toUpperCase()));
  if (!d) return { title: 'Country' };
  return { title: `${d.name} — country atlas`, description: `${d.name}: ${Array.isArray(d.companies) ? d.companies.length : d.companies} monitored companies, ${d.events_30d} structured events in 30 days, hiring momentum ${fmtPctSigned(d.hiring_momentum_30d)}.`, alternates: { canonical: `/country/${code.toLowerCase()}` } };
}

export default async function CountryPage({ params }: { params: Promise<{ code: string }> }) {
  const { code } = await params;
  const d = await load(code);
  const companies: CompanyCard[] = Array.isArray(d.companies) ? d.companies : [];
  const count = Array.isArray(d.companies) ? d.companies.length : d.companies;
  const map = await safe(api.map('events_30d'));
  const buckets = (map?.buckets ?? []).filter((b) => b.country.toUpperCase() === d.code.toUpperCase());
  return (
    <Container wide>
      <PageHeader
        eyebrow={
          <>
            <Link href={routes.countries()} className="hover:text-ink">
              Country atlas
            </Link>
            <span>/</span>
            <CountryChip code={d.code} link={false} />
            {d.region && <span>{d.region}</span>}
          </>
        }
        title={d.name}
        lede={`${fmtInt(count)} monitored companies headquartered in ${d.name}. Activity and hiring are averages over the monitored population.`}
      />
      <StatGrid cols={5}>
        <Stat label="Companies" value={fmtInt(count)} size="sm" />
        <Stat label="Events 7 d" value={fmtInt(d.events_7d)} size="sm" />
        <Stat label="Events 30 d" value={fmtInt(d.events_30d)} size="sm" />
        <Stat label="Activity" value={fmtScore(d.activity_score)} size="sm" />
        <Stat label="Hiring 30 d" value={fmtPctSigned(d.hiring_momentum_30d)} size="sm" />
      </StatGrid>
      <div className="grid gap-8 lg:grid-cols-12">
        <Section eyebrow="Activity" title="Country activity, 90 days" className="lg:col-span-8">
          {d.series?.length > 1 ? <LineChart series={[{ id: 'activity', label: 'Activity score', points: d.series.map((p) => ({ day: p.day, value: p.value })) }]} height={200} yZero /> : <Empty compact title="Not enough history yet." />}
        </Section>
        <Section eyebrow="Industry mix" title="Monitored companies by industry" className="lg:col-span-4">
          {d.industry_mix?.length ? <Bars dense rows={d.industry_mix.slice(0, 10).map((m) => ({ key: m.industry, label: m.industry.replace(/-/g, ' '), value: m.companies, href: routes.industry(m.industry) }))} /> : <Empty compact />}
        </Section>
      </div>
      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
        <Section eyebrow="Top movers" title="Highest Corporate Change Index">
          <CompanyMiniList items={d.movers ?? []} metric="corporate_change_index" label="CCI" sparkline />
        </Section>
        <Section eyebrow="New entrants" title="Most recently onboarded">
          <CompanyMiniList items={d.new_entrants ?? []} metric="activity_score" label="activity" />
        </Section>
        <Section eyebrow="Map" title="Headquarters clusters">
          {buckets.length ? <WorldMap buckets={buckets} highlight={[d.code]} interactive={false} /> : <Empty compact title="No geocoded clusters yet." />}
        </Section>
      </div>
      <Section eyebrow="Companies" title="Most active monitored companies" action={{ href: routes.companies({ country: d.code }), label: 'All in directory' }}>
        <CompanyTable items={companies} />
      </Section>
      <Section eyebrow="Events" title="Latest structured events" action={{ href: routes.events({ country: d.code }), label: 'All events' }}>
        <EventList events={d.events ?? []} variant="table" />
        <Note className="mt-3">Country attribution uses the company’s headquarters. Expansion events (new offices, new countries) appear under the company’s home country and on the destination country’s timeline where detected.</Note>
      </Section>
    </Container>
  );
}